<template>
  <div v-if="refresh" class="box">
    <el-card class="headerTop">
      <div class="headerTopLeftBox">
        <div style="cursor: pointer" @click="close()">
          <i class="el-icon-back"></i>
          返回
        </div>
        <div>|</div>
        <div>患者详情</div>
        <div class="LeftBox1">{{ name ? name : patient.name }}</div>
        <div class="LeftBox2">{{ age ? age : patient.age }}岁</div>
        <div class="LeftBox3">
          {{
            sex
              ? sex == 0
                ? '未知'
                : sex == 1
                ? '男'
                : '女'
              : patient.sex == 0
              ? '未知'
              : patient.sex == 1
              ? '男'
              : '女'
          }}
        </div>
        <div class="LeftBox4">
          电话:{{ phoneNumber ? phoneNumber : patient.phoneNumber }}
        </div>
        <div class="LeftBox5">
          {{
            type == '市场已到'
              ? `病历号 : ${patient.caseNumber}`
              : `预约号 : ${reservationNumber}`
          }}
        </div>
      </div>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-if="marketShow" label="患者信息" name="1">
          <patient-information
            :user-message="userMessage"
            :patient="patient"
            :cut="cut"
          ></patient-information>
        </el-tab-pane>
        <el-tab-pane v-if="type == '市场已到'" label="到店患者信息" name="2">
          <patient-information-pane :patient="patient" :show="false" />
        </el-tab-pane>
        <el-tab-pane v-if="type == '市场已到'" label="看诊记录" name="3">
          <seeing-record :patient="patient"></seeing-record>
        </el-tab-pane>
        <el-tab-pane v-if="type == '市场已到'" label="就诊记录" name="4">
          <treatment-record-pane :market="false" :patient="patient" />
        </el-tab-pane>
        <el-tab-pane v-if="type == '市场已到'" label="收费记录" name="5">
          <charge-record-pane :patient="patient" />
        </el-tab-pane>
        <el-tab-pane label="回访记录" name="6">
          <return-visit
            :create-time="userMessage.reservationTime"
            :channel-first="userMessage.channelFirst"
            :visit-list="visitList"
          ></return-visit>
        </el-tab-pane>
        <el-tab-pane v-if="type == '市场已到'" label="TC回访记录" name="7">
          <ctreturn-visit :tc-visit="tcVisit"></ctreturn-visit>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getReservation } from '@/api/erp/reservation'
import { getPerson } from '@/api/services/person'
import { listTc } from '@/api/services/tc'
import { listVisit } from '@/api/erp/visit'
import PatientInformation from '../components/PatientInformation'
import ReturnVisit from '../components/ReturnVisit'
import SeeingRecord from '../components/SeeingRecord'
import CtreturnVisit from '../components/CtreturnVisit'
import { decode, encode } from '@/utils/utils'
import {
  PatientInformationPane,
  ChargeRecordPane,
  TreatmentRecordPane,
} from '@/views/components/TabsPanes'

export default {
  name: 'UserHandle',
  components: {
    PatientInformation,
    ReturnVisit,
    SeeingRecord,
    PatientInformationPane,
    CtreturnVisit,
    ChargeRecordPane,
    TreatmentRecordPane,
  },
  data() {
    return {
      userMessage: {},
      type: '',
      activeName: '6',
      name: '',
      sex: '',
      age: '',
      phoneNumber: '',
      caseNumber: '',
      reservationNumber: '',
      cut: false,
      patient: {},
      tcVisit: [],
      visitList: [],
      refresh: true,
      marketShow: true,
    }
  },
  watch: {
    $route(to, form) {
      if (to.query.id !== form.query.id) {
        this.refresh = false
        this.$nextTick(() => {
          this.showTab()
          this.refresh = true
        })
      }
    },
  },
  created() {
    this.showTab()
  },
  methods: {
    showTab() {
      if (
        this.$route.query.marketId === '' ||
        this.$route.query.marketId === 0
      ) {
        this.getUser(this.$route.query.id)
        this.type = ''
        this.activeName = '6'
      } else {
        this.getListPerson(this.$route.query.id)
        this.type = '市场已到'
        this.activeName = '2'
        if (+this.$route.query.marketId) {
          this.getUser(this.$route.query.marketId)
          this.marketShow = true
          this.activeName = '1'
        } else {
          this.marketShow = false
        }
      }
    },
    async getUser(id) {
      await getReservation(id).then((res) => {
        this.userMessage = res.data
        this.name = res.data.name
        this.sex = res.data.sex
        this.age = res.data.age
        this.phoneNumber = res.data.phoneNumber
        this.caseNumber = res.data.caseNumber
        this.reservationNumber = res.data.reservationNumber
        let arr = [
          res.data.channelFirst,
          res.data.channelSecond,
          res.data.channelThird,
        ]
        this.userMessage.channel = arr.filter((item) => item)
        this.userMessage.projectOptions = res.data.visitDisease.split('-')
      })
    },
    async getListPerson(id) {
      const { data } = await getPerson(id)
      this.patient = data
    },
    async getListTc() {
      const data = await listTc({ clinicPersonId: this.patient.id })
      this.tcVisit = data.rows
    },
    async getVisitList() {
      if (this.$route.query.marketId === '') {
        await listVisit({ marketReservationId: this.$route.query.id }).then(
          (response) => {
            if (response.rows.length !== 0) {
              this.visitList = response.rows.reverse()
            }
          }
        )
      } else {
        await listVisit({
          marketReservationId: this.$route.query.marketId,
        }).then((response) => {
          if (response.rows.length !== 0) {
            this.visitList = response.rows.reverse()
          }
        })
      }
    },
    handleClick(tab) {
      if (tab.$options.propsData.name == 1) {
        this.cut = true
        // this.getUser()
      } else {
        this.cut = false
      }
      switch (tab.$options.propsData.name) {
        case '6':
          this.getVisitList()
          break
        case '7':
          this.getListTc()
          break
        default:
          break
      }
    },
    close() {
      try {
        const redirect = decode(this.$route.query.redirect)
        this.$router.replace(`${redirect.path}`)
      } catch (error) {
        this.$router.replace('/')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  padding-left: 20px;
  .headerTop {
    width: 100%;
    padding: 0 20px;
    display: flex;
    background: #f7f7f7;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    align-items: center;
    margin: 12px auto;
    .headerTopLeftBox {
      display: flex;
      flex-wrap: nowrap;
      .LeftBox1 {
        font-size: 16px;
        font-weight: 700;
        color: #2d405e;
      }
      .LeftBox2,
      .LeftBox3,
      .LeftBox4,
      .LeftBox5 {
        color: #2d405e;
      }
      div {
        margin-right: 20px;
      }
    }
    .backButtom {
      height: 30px;
    }
  }
}
</style>
